<template>
  <!-- <div :class="[$style.red,$style.green]">
    dddd 
  </div> -->
  <div :class="[zs.red,zs.green]">
    方式3
  </div>
  </template>
  <script setup>
  // const style =ref('red')
  // const style =ref({'color':'red'})
  // 动态 style使用
  // 普通类型：直接v-bind(变量)
  
  
  
  //  复杂类型：
  //  要使用''
  //  v-bind('style.color')  
  //  注意：不能直接访问
  // v-bind(style)




  // 方式2： 使用module模式   
  // style 标签添加module模式 ，通过$style访问


// 方式3 自定义module模式
// module='变量'
// 访问：变量

  </script>
  <!-- <style module>
  /* div {
    color: v-bind('style.color');
  } */
  .red{
    color: red;
  }
  .green {
    border: 1px solid #000;
  }
  </style> -->
   <style module="zs">
  div {
  color: v-bind('style.color');
 }
 .red{
   color: red;
 }
.green {
   border: 1px solid #000;
   }
 </style>